<!DOCTYPE html>
<html>
<head>
<title>Table sample with thead and tfoot with resize functionality</title>
<!-- 13/12/29 j.j.king for table helper -->
<!-- 14/01/12 done -->
<!-- 14/01/26 wrong colgroup removed -->

<style>
/* table, thead, tfoot, tbody, tr, td, th { margin: 0; padding: 0; } */

table { border-collapse: collapse; }
td { border: solid thin gray; }

/*
table thead tr { display: block; }
table tfoot tr { display: block; }
table tbody tr { display: block; }
*/

table thead { display: block; }
table tfoot { display: block; }
table tbody { display: block; }
table tbody { overflow-y: scroll; height: 100px; }

/*
table tbody { border: solid thin gray; }
table thead { border: solid thin gray; }
table tfoot { border: solid thin gray; }
*/

</style>

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script src="https://github.com/cowboy/jquery-resize/raw/master/jquery.ba-resize.js"></script>
<script src="jjkingTableHelper.js"></script>
<script>

$(document).ready(function()
{
	console.log('ready');

	// short format options: array of targets
	$('#body').on('resize', [ $('#header'), $('#footer') ], jjkingTableHelper.widthChanged);
	
	// long format options: tables and widths
	// $('#body').on('resize', { tables: [ $('#header'), $('#footer') ], widths: [ 300, 300, 300 ] } , jjkingTableHelper.widthChanged);

	// long format options: colgroup
	// var colgroup = $('<colgroup><col width="300"/><col width="300"/><col width="300"/></colgroup>');
	// $('#body').on('resize', { tables: [ $('#header'), $('#footer') ], colgroup: colgroup } , jjkingTableHelper.widthChanged);

	$('#resizeButton').on('click', function(e)
	{
		// $('#body').trigger('resize');
		
		var cell = $('#body tr:first td:first');
		cell.width(cell.width() + 10);
	});
});

</script>
</head>
<body style="margin: 2em">

<h3>Table sample with thead and tfoot with resize functionality</h3>

<p>
This sample HTML table demonstrates use of J.J.King's table helper library.
<br/>
The resize handler of the library is used to interlock the width of cells in the header, body and footer.
Without the resize handler, widths of the header and footer cells do not follow those of the body cells.
</p>

<p>
<button id="resizeButton">Change the width of a 'td' element</button>
</p>

<table>
<thead id="header">
	<tr>
		<td>Header1</td>
		<td>Header2</td>
		<td>Header3</td>
	</tr>
	<tr>
		<td>Header4</td>
		<td>Header5</td>
		<td>Header6</td>
	</tr>
	<tr>
		<td>Header7</td>
		<td>Header8</td>
		<td>Header9</td>
	</tr>
</thead>
<tbody id="body">
	<tr>
		<td>One</td>
		<td>Two</td>
		<td>Three</td>
	</tr>
	<tr>
		<td>One and One</td>
		<td>Two and Two</td>
		<td>Three and Three</td>
	</tr>
	<tr>
		<td>One</td>
		<td>Two</td>
		<td>Three</td>
	</tr>
	<tr>
		<td>One and One</td>
		<td>Two and Two</td>
		<td>Three and Three</td>
	</tr>
	<tr>
		<td>One</td>
		<td>Two</td>
		<td>Three</td>
	</tr>
	<tr>
		<td>One</td>
		<td>Two</td>
		<td>Three</td>
	</tr>
</tbody>
<tfoot id="footer">
	<tr>
		<td>Footer1</td>
		<td>Footer2</td>
		<td>Footer3</td>
	</tr>
	<tr>
		<td>Footer4</td>
		<td>Footer5</td>
		<td>Footer6</td>
	</tr>
</tfoot>
</table>
</body>
</html>